import React from 'react'
import { Button, Col, Descriptions, Row, Modal, Space } from 'antd'
import TheImage from '@/components/TheImage'

export default class Info extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      info: props.info, //订单详情数据
      isViewExplainModal: false,//查看记录弹窗
      refundDocuments: [],//退款凭证
    }
  }
  componentDidMount() {
    this.getData()
  }
  //数据处理
  getData = () => {
    let { info } = this.state
    if (info) {
      if (info.refundDocuments) {
        this.setState({
          refundDocuments: info.refundDocuments.split(',')
        })
      }
      this.setState({ info })
    }
  }
  render() {
    const { info, isViewExplainModal, refundDocuments } = this.state
    return (
      <div style={{ margin: '20px 0' }}>
        <Descriptions layout="vertical" bordered column={3}>
          <Descriptions.Item label="售后信息" style={{ width: '40%' }}>
            <span>售后单类型：</span>
            <span>{info.refundType === '1' && '退款'}</span>
            <span>{info.refundType === '0' && '变更'}</span>
            {
              info.refundType === '1' &&
              <div>
                <span>退款金额： <span style={{ color: 'red' }}><React.$price price={info.refundTotalPrice || 0} /></span></span>
                <div>退款原因： {
                  info.reason ?
                    <span> {info.reason}{(info.refundExplain || info.refundDocuments) && <Button type='link' onClick={() => { this.setState({ isViewExplainModal: true }) }}>查看</Button>}
                    </span>
                    : '-'
                }</div>
              </div>
            }
            {
              info.refundType === '0' &&
              <div>
                <span >变更原因：{info.reason}</span>
                <div>备注原因：{info.refundExplain ? info.refundExplain : '-'}</div>
              </div>
            }
          </Descriptions.Item >
          <Descriptions.Item label="地址信息">
            <Row>
              <Col>宠主姓名：</Col>
              <Col>{info.userName}</Col>
            </Row>
            <Row>
              <Col>宠主电话：</Col>
              <Col>{info.userMobile}</Col>
            </Row>
            <Row >
              <Col>服务地址：</Col>
              <Col>{info.address}</Col>
            </Row>
          </Descriptions.Item>
          <Descriptions.Item label="买家信息">
            <Row>
              <Col>买家ID：</Col>
              <Col>{info.memberId}</Col>
            </Row>
            <Row>
              <Col>买家昵称：</Col>
              <Col>{info.memberNick}</Col>
            </Row>
          </Descriptions.Item>
        </Descriptions >
        <Modal width={'30%'} title="查看" open={isViewExplainModal} onCancel={() => { this.setState({ isViewExplainModal: false }) }} footer={null} >
          <div>
            {
              info.refundExplain && <div style={{ height: 150, border: '1px solid #ebebeb', marginBottom: 20 }}>{info.refundExplain}</div>
            }

            {refundDocuments.length > 0 && <Space size={10} style={{ display: 'flex', flexWrap: 'wrap' }}>
              {
                refundDocuments.map(item => {
                  return <TheImage src={item} width={80} height={80}></TheImage>
                })
              }
            </Space>
            }

          </div>
        </Modal>
      </div >
    )
  }
}